<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script>
    // 面向过程和面向对象

    // 面向过程
    // 分析解决问题需要的步骤,然后通过变量和方法一一实现,使用时调用变量和方法即可 (遇到什么问题 就解决什么问题 功能实现即可)


    // 举例说明:
    // 购物车   => 1. 获取元素 2. 全选反选 3.加减(加减判断)  4. 单删/全删(删除细节)  5. 结算
    // 元素拖拽 => 1. 获取元素 2. 先按下 -> 记录鼠标的位置 3. 再移动 -> 盒子跟随鼠标移动  4. 松开 -> 盒子不在跟随鼠标移动


    // 对象 => 数据(对一个或一类事物特征(属性)和行为(方法)的描述)
    // 面向对象  => 以对象为基础
    //  思想上提升,就是将你的需求抽象成一个对象,然后针对这个对象分析其特征(属性)与行为(方法)--这个对象就称之为类(面向对象)
    //  也就是说 把构成问题的事务（事务：一般是指要做的或所做的事情。在计算机术语中是指访问并可能更新数据库中各种数据项的一个程序执行单元(unit) ），分解成各个对象，建立对象的目的是为了描述某个事物在整个解决问题的步骤中的行为


    // 小本经营
    // 遇到什么问题 就解决什么问题 功能实现即可

    // 企业经营   将要做的或所做的事情拆分  -> (各司其职)
    // 产品 前端 UI 后端 测试 运维  销售      + 前台  保安 秘书  财务 行政 保洁

    // 前端 (PC + 移动端 + 大屏 + 小程序 + 桌面应用)

    // 大的拆小的  -> 小的拆成更小的  => 大量的分工和紧密的协作(以对象为基础)


    // 经典案例

    // 把大象放到冰箱中需要几步?

    // 面向过程   => 分析解决问题需要的步骤,然后通过变量和方法一一实现,使用时调用变量和方法即可
    // 1. 有大象和冰箱
    // 2. 打开冰箱
    // 3. 把大象放到冰箱中
    // 4. 关上冰箱

    // 面向对象  思想上提升,就是将你的需求抽象成一个对象,然后针对这个对象分析其特征(属性)与行为(方法)--这个对象就称之为类(面向对象)
    // 也就是说 把构成问题的事务（事务：一般是指要做的或所做的事情），分解成各个对象   => 在分别对对象的属性和方法进行描述

    // 最简单的面向对象 -> 字面对象
    // 把面向过程中的 变量和方法 整合到对象中 作为对象的属性和方法

    // 冰箱 = {
    //     brand: "xx",
    //     volume: "120",
    //     weight: "50kg",
    //     price: "1299.00",
    //     open: function () { },
    //     put: function (target) {
    //         // 冷冻层

    //         // 保鲜层
    //     },
    //     close: function () { }
    // }

    // 大象 = {
    //     name: "奥利芬",
    //     age: 4,
    //     weight: "2000kg",
    // }
    // 鸡蛋 = {
    //     type: "土鸡蛋",//肉鸡蛋 无菌蛋
    // }


    // 冰箱.open();
    // 冰箱.put(大象);
    // 冰箱.put(鸡蛋);
    // 冰箱.close();


    // 面向对象的三大特征:
    // 封装  继承  多态

</script>

</html>